<MDXHeader
  title="Flex"
  description="Creates a flex container which enables flex context for all its direct children."
/>

<ComponentPreview name="flex-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx solidui-cli@latest add flex
```

</TabsContent>

<TabsContent value="manual">

<Step>Copy and paste the following code into your project: </Step>

<ComponentSource name="flex" />

</TabsContent>

</Tabs>

## Usage

```tsx
import { Flex } from "~/components/ui/flex"
```

```tsx
<Card class="w-full max-w-xs p-6">
  <Flex>
    <div>
      <p class="text-sm font-normal text-gray-500">Tickets sold</p>
      <p class="text-3xl font-semibold text-gray-700">9,876</p>
    </div>
    <div>
      <p class="text-sm font-normal text-gray-500">Average Selling Price</p>
      <p class="text-3xl font-semibold text-gray-700">$ 175.20</p>
    </div>
  </Flex>
</Card>
```
